<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
			
	<style>
	.rich-panel-header {
		color:#0054BD;
	}
	.panel {
		vertical-align:top;
	}
	.top {
		width:200px;height:100px;
	}

	.head2 {
		background-image : url();
		background-color : #4C9600;
		height:18px;
		text-align:center;
		vertical-align:middle;
		color:#CFF;
		padding:4px 0;
	}
	
	.body3 {
		height:100px;
		overflow:auto;
	}
	</style>
	<h:panelGrid columnClasses="panel" border="0" columns="2">
		<rich:panel>
			<f:facet name="header">
					Panel #1. Changing Style Synchronously
			</f:facet>
				Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
				classes overwrite the ones come from the skin.
		</rich:panel>
	 
			<rich:panel>
			<f:facet name="header">
					Panel #2. Changing Style Synchronously
			</f:facet>
				In this example, we define header color using the .rich-panel-header class and all panels located on the same page
				inherit this color
			</rich:panel>	
	
	</h:panelGrid>
	
	<h:panelGrid columnClasses="panel" border="0" columns="3">
		<rich:panel
			onmouseover="document.getElementById(this.id+'_header').style.background='#60BA01';document.getElementById(this.id+'_body').style.background='#F4FFF8'"
			onmouseout="document.getElementById(this.id+'_header').style.background='#4C9600';document.getElementById(this.id+'_body').style.background='#E4FFC8'"
			style="width:200px;" headerClass="head2" bodyClass="body3">
			<f:facet name="header">
	    		Panel header
			</f:facet>
			Base on the previous layout, but some javascript behaviour added.
		</rich:panel>
	
		<rich:panel style="width:200px;"  bodyClass="body3">
			<f:facet name="header">
				Scrolling Text Panel
			</f:facet>
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
	     Long Text Long Text Long Text
		</rich:panel>
	
	    <rich:panel styleClass="top">
			This is a panel without the header     
	    </rich:panel>
	
		<rich:panel style="position: absolute; top: 400px; right: 100px; " styleClass="top">
	    	<f:facet name="header">
	    		Panel header
			</f:facet>
			This is a panel with absolute position on the screen.<br/>
			Resize the browser's window to see the result.
		</rich:panel>
	
	</h:panelGrid>

</ui:composition>